<template>
	<view :style="themeColor">
		<view class="loading_css" v-if="isShow">
			<u-loading size="36" color="#3090FF"></u-loading>
			<view>加载中</view>
		</view>
		<view class="page" v-else>
			<view class="flex benben-position-layout flex flex-wrap align-center courseDetails_flex_0"
				:style="{height:(88+StatusBarRpx)+'rpx'}">
				<view class='flex flex-wrap align-center justify-between flex-sub courseDetails_fd0_0'>
					<view class='flex flex-wrap align-center courseDetails_fd0_0_c0' @tap.stop="handleJumpDiy"
						data-type="back" data-url="1">
						<text class='fu-iconfont2  courseDetails_fd0_0_c0_c0'>&#xE794;</text>
					</view>
					<view class='flex flex-wrap align-stretch justify-center'>
					</view>
					<view class='flex flex-wrap align-center justify-end courseDetails_fd0_0_c0'>
						<image @tap.stop="handleJumpDiy" data-type="navigateTo" :data-url="`/pages/sy/cachVideo/cachVideo?id=${aid}`" v-if="courseInfo.is_buy == 1" class='courseDetails_fd0_0_c2_c0' mode="aspectFit" :src='STATIC_URL+"31.png"'></image>
						<image style="margin-left: 24rpx;" class='courseDetails_fd0_0_c2_c0' mode="aspectFit" :src='STATIC_URL+"518.png"' @tap.stop="popupShow1692100153978=true"></image>
					</view>
					
				</view>

			</view>
			<!-- <view :style="{height: (88+StatusBarRpx)+'rpx'}"></view> -->
			<!---flex布局flex布局开始-->
			<view class="flex benben-flex-layout flex-wrap align-center courseDetails_flex_1">
				<image class='courseDetails_fd1_0' mode="aspectFill" :src='courseInfo.thumb'></image>
			</view>

			<!---flex布局flex布局结束-->
			<!---flex布局flex布局开始-->
			<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout courseDetails_flex_2">
				<view class='courseDetails_fd2_0'>
					<view>{{courseInfo.title}}</view>
					<view class='flex flex-wrap align-center'>
						<text class='courseDetails_fd2_0_c1_c0'>{{courseInfo.synopsis}}</text>
					</view>
					<view class='flex flex-wrap align-center' v-if="courseInfo.price != 0">
						<text class='courseDetails_fd2_0_c2_c0'>￥</text>
						<text class=' courseDetails_fd2_0_c2_c1'>
							<text class=' courseDetails_price1_fd2_0_c2_c1'>{{ courseInfo.price | frontPrice }}</text>
							<text class=' courseDetails_price1_fd2_0_c2_c1'>{{ courseInfo.price | laterPrice }}</text>
						</text>
					</view>
				</view>
			</view>

			<!---flex布局flex布局结束-->
			<!---flex布局flex布局开始-->
			<view class="flex benben-flex-layout flex-wrap align-center courseDetails_flex_3">
			</view>

			<!---flex布局flex布局结束-->
			<view class='home_fd4_1'>
				<u-tabs :list="courseList" :bar-style="barStyle" active-color="#101010" bar-width="40" bar-height="6" :is-scroll="false" inactive-color="#969696" font-size="30" gutter="10" :current="courseCurrent" @change="change1"></u-tabs>
				<view class='flex flex-wrap align-center' style="margin-top: 24rpx;" v-if="courseCurrent == 0">
					<jyf-parser class='home_fd4_1_c2_c0' :html="courseInfo.conent | richTextFormat"></jyf-parser>
				</view>
				<template v-if="courseCurrent == 1">
					<view v-for="(item, index) in directoryList" :key="index">
						<view class='flex home_fd4_1_c3_c0'>
							<text class='home_fd4_1_c3_c0_c0'>{{item.name}}</text>
						</view>
						<template v-for="(v, k) in item.children">
							<view class='flex justify-between home_fd4_1_c3_c1' @tap.stop="viewVideo(v.aid, v.shipin, v.is_download, v.name, v.learn)">
								<view class='flex item_left'>
									<image class='home_fd4_1_c3_c1_c0_c0' mode="aspectFit" :src='STATIC_URL+"513.png"'>
									</image>
									<view class='home_fd4_1_c3_c1_c0_c1'>{{v.name}}</view>
								</view>
								<view class='flex'>
									<image class='home_fd4_1_c3_c1_c0_c0' mode="aspectFit" :src='STATIC_URL+"514.png"' v-if="courseInfo.is_buy == 0">
									</image>
									<template v-if="courseInfo.is_buy == 1">
										
										<image v-if="v.is_download == 1" class='home_fd4_1_c3_c1_c0_c0' mode="aspectFit" :src='STATIC_URL+"515.png"'>
										</image>
										<image v-else class='home_fd4_1_c3_c1_c0_c0' mode="aspectFit" :src='STATIC_URL+"516.png"'>
										</image>
									</template>
								</view>
							</view>
						</template>
					</view>
					<view class="noData_other" v-if="directoryList.length == 0 && !isShow">
						<image :src='STATIC_URL+"no.png"'></image>
					</view>
				</template>
			</view>
			<view @tap.stop="goBuy" class='flex flex-direction flex-wrap align-center self-center home_fd4_2' v-if="courseInfo.is_buy == 0">
				<text class='home_fd4_2_c0'>立即购买</text>
			</view>
			<view @tap.stop="goStudy" class='flex flex-direction flex-wrap align-center self-center home_fd4_2' v-if="courseInfo.is_buy == 1 && is_network == 1">
				<text class='home_fd4_2_c0'>立即学习</text>
			</view>
			
			<view style="height: 130rpx;"></view>
			
			
			
			<benben-popup v-model="popupShow1692100153978" :mask="true" :mask-close-able="true" mode='bottom'>
				<!---fxflex布局开始-->
				<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout">
					<view class='flex flex-direction flex-wrap align-stretch search_fd4_0'>
						<view class='flex flex-wrap align-center justify-between search_fd4_0_c0'>
							<view class='flex flex-wrap align-center search_fd4_0_c0_c0'>
							</view>
							<view class='flex flex-wrap align-center justify-center search_fd4_0_c0_c1'>
								<text class='search_fd4_0_c0_c1_c1'>分享到</text>
							</view>
							<view class='flex flex-wrap align-center search_fd4_0_c0_c2'>
								<image class='search_fd4_0_c0_c2_c0' mode="aspectFit" :src='STATIC_URL+"129.png"'
									@tap="popupShow1692100153978=false"></image>
							</view>
						</view>
						<view class='flex flex-wrap align-center justify-around search_fd4_0_c1'>
							<view class='flex flex-direction flex-wrap align-center' @tap="shareWeixin(1)">
								<image class='search_fd4_0_c1_c0_c0' mode="aspectFit" :src='STATIC_URL+"174.png"'>
								</image>
								<text class='search_fd4_0_c1_c0_c1'>微信好友</text>
							</view>
							<view class='flex flex-direction flex-wrap align-center' @tap="shareWeixin(2)">
								<image class='search_fd4_0_c1_c0_c0' mode="aspectFit" :src='STATIC_URL+"175.png"'>
								</image>
								<text class='search_fd4_0_c1_c0_c1'>朋友圈</text>
							</view>
						</view>
					</view>
				</view>
			
				<!---fxflex布局结束-->
			
			</benben-popup>

		</view>
	</view>
</template>
<script>
	export default {
		components: {},

		data() {
			return {
				popupShow1692100153978: false,
				isShow: true,
				aid: "",
				courseInfo: {
					conent: ""
				},  // 详情信息
				directoryList: [],  // 详情目录
				courseCurrent: 0,
				scrollTop: 0,
				barStyle: {
					backgroundColor: '#3090FF'
				},
				courseList: [{
					name: '课程详情'
				},{
					name: '课程目录'
				}],
				firends: {},
				is_network: 0,
			};
		},
		computed: {
			themeColor() {
				return this.$store.getters.themeColor
			},

		},
		watch: {},
		onLoad(options) {
			let {aid} = options;
			if (aid !== undefined) this.aid = aid;
			this.getFriends();
			
			
			let _this = this;
			uni.getNetworkType({
				success: function (res) {
					// console.log(res);
					if (res.networkType == 'none') {
						_this.is_network = 0;
					} else{
						_this.is_network = 1;
					}
				}
			});
			uni.onNetworkStatusChange(function (res) {
				if (res.networkType == 'none') {
					_this.is_network = 0;
				} else{
					_this.is_network = 1;
				}
			});
		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {
			this.getDetails();
			this.getCourseCatalog();
		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			// 分享内容
			getFriends() {
				this.$api.post(global.apiUrls.post658fe5228307d, {
			
				}).then(res => {
					// console.log(res);
					if (res.data.code == 1) {
						this.firends = res.data.data;
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},
			shareWeixin(type) {
				let _this = this;
				if (type == 1) {
					uni.share({
						provider: "weixin",
						scene: "WXSceneSession",
						type: 0,
						href: _this.firends.url,
						title: '悟空学院',
						summary: _this.courseInfo.title,
						imageUrl: '/static/logo.png',
						success: function (res) {
							console.log("success:" + JSON.stringify(res));
						},
						fail: function (err) {
							console.log("fail:" + JSON.stringify(err));
						}
					});
				} else {
					uni.share({
						provider: "weixin",
						scene: "WXSceneTimeline",
						type: 0,
						href: _this.firends.url,
						title: '悟空学院',
						summary: _this.courseInfo.title,
						imageUrl: '/static/logo.png',
						success: function (res) {
							console.log("success:" + JSON.stringify(res));
						},
						fail: function (err) {
							console.log("fail:" + JSON.stringify(err));
						}
					});
				}
				_this.$refs.popup.close();
			},
			// 课程详情  post65743bb4bfd8a
			getDetails() {
				this.$api.post(global.apiUrls.post65743bb4bfd8a, {
					aid: this.aid
				}).then(res => {
					this.isShow = false;
					// console.log(res);
					if (res.data.code == 1) {
						this.courseInfo = res.data.data;
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},
			// 课程目录  post65743c6fb43e4
			getCourseCatalog() {
				this.$api.post(global.apiUrls.post65743c6fb43e4, {
					aid: this.aid
				}).then(res => {
					// console.log(res);
					if (res.data.code == 1) {
						this.directoryList = res.data.data;
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},
			change1(index) {
				this.courseCurrent = index;
			},
			// 立即购买
			goBuy() {
				uni.navigateTo({
					url: '/pages/sy/confirmOrder/confirmOrder?aid=' + this.aid
				})
			},
			// 去学习
			goStudy() {
				if (this.directoryList.length == 0) {
					this.$message.info('请联系客服添加课程目录');
				}
				if (this.directoryList.length > 0) {
					let videoUrl = {
						url: "",
						id: "",
						is_download: "",
						name: "",
						learn: 0
					};
					let index1 = -1;
					let index2 = -1;
					// this.directoryList.reverse();
					jump:
					for (let i = 0; i < this.directoryList.length; i++) {
						if (this.directoryList[i].children.length > 0) {
							for (let k = 0; k < this.directoryList[i].children.length; k++) {
								if (this.directoryList[i].children[k].is_watch == 0) {
									// console.log(this.directoryList[i].children[k]);
									index1 = i
									index2 = k
									break jump;
								}
							}
						}
					}
					if (index2 == -1) {
						this.directoryList.forEach((v, k) => {
							if (v.children.length > 0) {
								v.children.forEach((v1, k1) => {
									if (k1 == 0) {
										videoUrl.url = v1.shipin
										videoUrl.id = v1.aid
										videoUrl.is_download = v1.is_download
										videoUrl.name = v1.name
										videoUrl.learn = v1.learn
									}
								})
							}
						})
					} else {
						videoUrl.url = this.directoryList[index1].children[index2].shipin;
						videoUrl.id = this.directoryList[index1].children[index2].aid;
						videoUrl.is_download = this.directoryList[index1].children[index2].is_download;
						videoUrl.name = this.directoryList[index1].children[index2].name;
						videoUrl.learn = this.directoryList[index1].children[index2].learn;
					}
					uni.setStorageSync('videoUrl', videoUrl);
					uni.navigateTo({
						url: '/pages/sy/seeVideo/seeVideo'
					})
				}
			},
			viewVideo(id, url, is_download, name, learn) {
				if (this.courseInfo.is_buy == 0) {
					this.$message.info('请先购买课程');
					return;
				}
				
				let _this = this;
				let videoUrl = {
					url: "",
					id: id,
					is_download: is_download,
					name: name,
					learn: learn
				};
				let saveFileList = [];
				if (uni.getStorageSync('saveFileList')) {
					saveFileList = uni.getStorageSync('saveFileList');
				}
				if (_this.is_network == 0) {
					if (saveFileList.length > 0) {
						let index = -1;
						saveFileList.forEach((v, k) => {
							if (v.id == id) {
								index = k;
							}
						})
						if (index == -1) {
							_this.$message.info('视频暂未缓存');
							return;
						} else {
							videoUrl.learn = 0;
							videoUrl.url = saveFileList[index].url;
							uni.setStorageSync('videoUrl', videoUrl);
							uni.navigateTo({
								url: '/pages/sy/seeVideo/seeVideo'
							})
						}
					} else {
						_this.$message.info('视频暂未缓存');
						return;
						
					}
				} else{
					videoUrl.url = url;
					uni.setStorageSync('videoUrl', videoUrl);
					uni.navigateTo({
						url: '/pages/sy/seeVideo/seeVideo'
					})
				}
			},
		}
	};
</script>
<style lang="scss" scoped>
	.item_left {
		width: calc(100% - 46rpx);
	}
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: #FFFFFF;
		background-size: 100% auto;
	}

	.courseDetails_flex_0 {
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.courseDetails_fd0_0_c2_c0 {
		width: 48rpx;
		height: 48rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.courseDetails_fd0_0_c0_c0 {
		font-size: 36rpx;
		color: var(--benbenFontColor3);
	}

	.courseDetails_fd0_0_c0 {
		width: 120rpx;
	}

	.courseDetails_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
		background-size: 100% auto;
		position: absolute;
		width: 100%;
	}

	.courseDetails_flex_1 {
		position: relative;
		top: 0rpx;
		width: 100%;
		height: 500rpx;
	}

	.courseDetails_fd1_0 {
		width: 100%;
		height: 500rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.courseDetails_flex_2 {
		padding: 40rpx 30rpx 24rpx 30rpx;
	}

	.courseDetails_price1_fd2_0_c2_c1 {
		font-size: 34rpx;
		color: rgba(255, 70, 32, 1);
	}

	.courseDetails_fd2_0_c2_c1 {
		color: #ff5536;
		font-weight: 600;
	}

	.courseDetails_fd2_0_c2_c0 {
		font-size: 22rpx;
		color: rgba(255, 70, 32, 1);
		font-weight: 700;
	}

	.courseDetails_fd2_0_c1_c0 {
		font-size: 28rpx;
		color: rgba(102, 102, 102, 1);
		margin: 14rpx 0rpx 20rpx 0rpx;
	}

	.courseDetails_fd2_0 {
		font-size: 34rpx;
		font-weight: 700;
	}

	.courseDetails_flex_3 {
		background: #f8f8f8;
		height: 20rpx;
		background-size: 100% auto;
	}
	
	.home_fd4_1 {
		padding: 0 30rpx;
	}
	
	.home_fd4_1_c3_c1_c0_c1 {
		margin: 0rpx 0rpx 0rpx 16rpx;
	}
	
	.home_fd4_1_c3_c1_c0_c0 {
		width: 40rpx;
		height: 40rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}
	
	.home_fd4_1_c3_c1 {
		background: #F8F8FA;
		background-size: 100% auto;
		border-radius: 16rpx;
		margin: 20rpx 0rpx 0rpx 0rpx;
		padding: 24rpx 24rpx 24rpx 24rpx;
	}
	
	.home_fd4_1_c3_c0_c0 {
		font-size: 32rpx;
		font-weight: 700;
	}
	
	.home_fd4_1_c3_c0 {
		margin: 32rpx 0rpx 0rpx 0rpx;
	}
	
	::v-deep .home_fd4_1_c2_c0 {
		width: 100%;
	}
	
	.home_fd4_1_c1_c0 {
		width: 100%;
		height: 357rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}
	
	.home_fd4_1_c1 {
		margin: 24rpx 0rpx 24rpx 0rpx;
	}
	
	.home_fd4_2_c0 {
		font-size: 32rpx;
		color: var(--benbenFontColor3);
	}
	
	.home_fd4_2 {
		background: var(--benbenbgColor0);
		border-radius: 8rpx;
		background-size: 100% auto;
		width: 690rpx;
		line-height: 88rpx;
		height: 88rpx;
		position: fixed;
		bottom: 40rpx;
		left: 30rpx;
	}
	
	.search_fd4_0_c1_c0_c1 {
		font-size: 24rpx;
		font-weight: 400;
		color: #333;
	}
	
	.search_fd4_0_c1_c0_c0 {
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		margin: 0rpx 0rpx 16rpx 0rpx;
	}
	
	.search_fd4_0_c1 {
		padding: 0rpx 0rpx 58rpx 0rpx;
	}
	
	.search_fd4_0_c0_c2_c0 {
		width: 40rpx;
		height: 40rpx;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}
	
	.search_fd4_0_c0_c2 {
		margin: 0rpx 2rpx 0rpx 0rpx;
	}
	
	.search_fd4_0_c0_c1_c1 {
		font-size: 32rpx;
		font-weight: 700;
		color: #333;
		margin: 0rpx 16rpx 0rpx 16rpx;
	}
	
	.search_fd4_0_c0_c1_c0 {
		width: 32rpx;
		height: 10rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}
	
	.search_fd4_0_c0_c1 {
		padding: 40rpx 0rpx 48rpx 0rpx;
	}
	
	.search_fd4_0_c0_c0 {
		width: 40rpx;
	}
	
	.search_fd4_0_c0 {
		padding: 0rpx 13rpx 0rpx 0rpx;
	}
	
	.search_fd4_0 {
		background: var(--benbenbgColor1);
		background-size: 100% auto !important;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		padding: 0rpx 32rpx 0rpx 32rpx;
	}
</style>